<template>
  <div class="box">
    <div class="search-box content-fade-upper" style="position: relative; z-index: 2">
      <input-angle style="z-index: 6; width: 18%; margin-left: 1%">
        <a-select
          ref="select"
          v-model:value="nodeId"
          style="width: 100%"
          placeholder="重点区域"
          @select="handleAreaSelect"
        >
          <a-select-option
            v-for="(item, index) in data"
            :key="index"
            :label="item"
            :value="item.areaName"
            >{{ item.areaName }}</a-select-option
          >
        </a-select>
      </input-angle>
      <el-button type="primary" style="margin-left: 1%; z-index: 999">查询</el-button>
      <el-button style="margin-left: 1%; z-index: 999" @click="resetting">重置</el-button>
    </div>
    <map-type-control class="fixed right-30px bottom-30px z-100" />
    <pop-view v-if="show" ref="popRef" @close="close" />
  </div>
</template>
<script>
  import {
    defineComponent,
    reactive,
    toRefs,
    computed,
    onMounted,
    nextTick,
    onBeforeUnmount,
  } from 'vue';
  import inputAngle from '../basic/components/inputAngle.vue';
  import popView from './components/popView.vue';
  import { addmarker } from './static/setPoint.js';
  import { areaList } from './static/area';
  import { useMapStore } from '@/store/modules/map';
  import { getCongestionCurve } from '@/api/analysis/index.ts';
  import MapTypeControl from '@/components/MapTypeControl/index.vue';

  export default defineComponent({
    components: { popView, inputAngle,MapTypeControl },
    setup() {
      const userStore = useMapStore();
      const state = reactive({
        popRef: null,
        markerList: [],
        map: computed(() => userStore.ownMap),
        show: false,
        leftContent: null,
        rightContent: null,
        nodeId: null,
        roadId: null,
        roadName: '',
        road: [],
        areaList,
        searchForm: {
          areaName: '',
          nodeId: '9093',
        },
        data: [],
      });
      // 添加maker
      const makerList = (list) => {
        clearAllMarker();
        if (!list?.length) return;
        const map = state.map;
        // map.removeEventListener('click')
        list.map((i) => {
          const type = areaNameIncludes(i.areaName);
          // console.log("type",type);
          if (type) {
            state.data.push({ ...i, type });
            const centerPoint = i.centerPoint.split(',');
            const point = new window.BMap.Point(centerPoint[0], centerPoint[1]); // 创建点坐标
            state.map.centerAndZoom(point, 15);
            const marker = addmarker(map, {
              lng: centerPoint[0],
              lat: centerPoint[1],
              title: i.areaName,
              areaId: i.areaId,
              type,
            });
            state.markerList.push(marker);
            map.addOverlay(marker);
            marker.addEventListener('click', (e) => {
              const markerData = marker.getPosition();
              // console.log(markerData);
              state.show = true;
              nextTick(() => {
                console.log(e);
                console.log(markerData);
                state.popRef.open(e, markerData);
              });
            });
          }
        });
      };
      const areaNameIncludes = (areaName) => {
        let type = '';
        if (areaName.includes('医院')) {
          type = 2;
        } else if (areaName.includes('学')) {
          type = 3;
        } else if (areaName.includes('场')) {
          type = 1;
        }else if(!areaName.includes('区')){
          type = 1;
        }
        return type;
      };
      const close = () => {
        setTimeout(() => {
          state.show = false;
        }, 600);
      };
      const handleRoadSelect = () => {};
      const clickSearch = () => {
        selectAddMaker();
      };
      const handleAreaSelect = (val, option) => {
        console.log("option---",option);
        
        const e = option.label;
        const data = {
          areaId: e.areaId,
          lng: e.centerPoint.split(',')[0],
          lat: e.centerPoint.split(',')[1],
          title: e.areaName,
          type: e.type,
        };
        const point = new window.BMap.Point(data.lng,data.lat); // 创建点坐标
            state.map.centerAndZoom(point, 15);
            
        state.show = true;
        const info = {
          isTrusted: true,
          y: 430,
          x: 487,
        };
        nextTick(() => {
          state.popRef.open(info, data);
        });
      };
      // 清空界面数据
      const clearAllMarker = () => {
        state.markerList = [];
        state.map.clearOverlays();
      };
      // 请求数据接口
      const selectAddMaker = () => {
        getCongestionCurve(state.searchForm).then((res) => {
          // console.log('请求数据接口----', res);
          // 临时处理屏蔽后两条数据
          // let newList = res?.result.splice(0,res?.result.length - 2)

          let newList = res?.result;
          makerList(newList);
          
        });
      };
      const resetting = () => {
        state.searchForm.areaName = ''
        state.nodeId = null
        state.data = []
        selectAddMaker()
        state.show = false
      }
      onMounted(() => {
        nextTick(() => {
          state.map.clearOverlays();
          state.map.removeEventListener('click');
          // makerList(state.map);
        });
        selectAddMaker();
      });
      onBeforeUnmount(() => {
        clearAllMarker();
      });
      return {
        ...toRefs(state),
        close,
        handleRoadSelect,
        clickSearch,
        handleAreaSelect,
        resetting,
      };
    },
  });
</script>
<style lang="less" scoped>
  .box {
    color: white;
  }
  .search-box {
    margin-top: 1%;
    display: flex;
    align-items: center;
    width: 70%;
  }
  :deep .el-input__wrapper {
    background: transparent !important;
    color: white;
  }
  :deep .el-input__wrapper {
    background-color: #ffffff00;
    box-shadow: 0px 0px 0px;
  }
  :deep .el-select {
    --el-select-border-color-hover: none;
    --el-select-input-focus-border-color: none;
  }
  :deep .ant-picker-cell-disabled {
    color: rgb(173, 173, 173);
    background-color: #bebebe15;
  }
  :deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: #ffffff00;
    border-color: #ffffff00;
    border: none;
  }
  :deep .ant-select-selection-item {
    color: white;
  }
</style>
